<template>
	<view>
		<view class="app-header-wrapper">
			<view class="app-header-left">
				<view class="app-header-item">
					<view class="image-icons app-header-icon icon-back" @click="Back">
						<image src="../../static/images/left_b.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="app-header-middle">
				<view class="app-header-title text-ellipsis">
					内容详情
				</view>
			</view>
			<view class="app-header-right">
				<view class="app-header-item">
					<image src="../../static/images/three_b.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="mi-circle-product" :style="`min-height: calc(100vh - 0.96rem);`">
			<view class="product-header maxW" v-if="dataInfo.entity_circle">
				<view class="img-box">
					<image :src="dataInfo.entity_circle.img" mode="">
					</image>
				</view>
				<view class="title">
					{{dataInfo.entity_circle.name}}
				</view>
				<view class="device-hot">
					{{dataInfo.entity_circle.hot}}热度
				</view>
				<view class="arrow">
					<image src="../../static/images/right.png" mode=""></image>
				</view>
			</view>

			<view class="main-content">
				<view class="article">
					<view class="card rec-card">
						<view class="user">
							<view class="user-avatar">
								<LazyLoad :src="dataInfo.icon" width='100%' height='100%'></LazyLoad>
							</view>
							<view class="user-info">
								<view class="user-info-name">
									{{dataInfo.nickname}}
								</view>
								<view class="user-info-other">
									<text class="time">{{dataInfo.create_time}}</text>
									<text class="device">
										{{dataInfo.dev_type}}
									</text>
									<text>{{dataInfo.belong_place}}</text>
								</view>
							</view>
						</view>
						<view class="card-content">
							<view class="normal">
								<view class="content">
									{{dataInfo.content}}
								</view>
								<template v-if="dataInfo.pic_list&&dataInfo.pic_list.length!==0||dataInfo.video_list&&dataInfo.video_list.length!==0">
									<imageList :pic_list='dataInfo.pic_list' :video_list='dataInfo.video_list'>
									</imageList>
								</template>
							</view>
						</view>
					</view>
				</view>
				<view class="comments">
					<view class="comments-num">
						共{{dataInfo.comment_num==''?0:dataInfo.comment_num}}条评论
					</view>
					<view class="comments-user">
						<view class="comments-user-avatar">
							<image src="https://i8.mifile.cn/b2c-mimall-media/fa83661ee38a1495b26a59e73ae15eb3.png"
								mode=""></image>
						</view>
						<view class="comments-user-input">
							来说点什么...
						</view>
					</view>
					<template v-if="comment_list.length==0">
						<view class="no-data">
							暂时还没有评论哦
						</view>
					</template>
					<template v-else>
						<view class="comments-list">
							<view class="comment" v-for="(item,index) in comment_list" :key="index">
								<view class="comment-avatar">
									<image :src="item.img" mode=""></image>
								</view>
								<view class="comment-content">
									<view class="comment-info">
										<view class="comment-info-l">
											<view class="comment-user">
												<text class="name">
													{{item.nickname}}
												</text>
												<text class="time">
													{{item.create_time|formatRelativeTime}}
												</text>
												<text class="time">
													{{item.belong_place}}
												</text>
											</view>
											<view class="comment-text">
												{{item.comment}}
											</view>

										</view>
										<view class="comment-praise">
											<text class="num">{{item.praise_num}}</text>
											<image src="../../static/images/m_b_praisa.png" mode=""></image>
										</view>
									</view>
									<view class="comment-discuss" v-if="item.second_comment_list.length!==0">
										<view class="comment-discuss-item" v-for="(i,j) in item.second_comment_list"
											:key="j">
											<view class="p">
												<text class="name">
													{{i.nickname}}
												</text>
												<text class="name">
													:
												</text>
												<text class="text">{{i.comment}}</text>
											</view>
											<view class="p">
												<text class="name">
													{{i.belong_place}}
												</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>

					</template>

				</view>
				<view class="bottom-action maxW" v-if="dataInfo.products">
					<view class="bottom-action-left" @click="toProDatail(dataInfo.products[0].product_id)">
						<view class="bottom-action-btn el-flex">
							<text> ￥{{dataInfo.products[0].price}}起 立即购买</text>
							<image src="../../static/images/right_w.png" mode=""></image>
						</view>
					</view>
					<view class="bottom-action-right">
						<view class="bottom-action-ctrl">
							<view class="action-icon">
								<image src="../../static/images/m_b_share.png" mode=""></image>
							</view>
							<view class="action-icon">
								<image src="../../static/images/m_b_msg.png" mode=""></image>
								<text v-if="dataInfo.comment_num!=''">{{dataInfo.comment_num}}</text>
							</view>
							<view class="action-icon">
								<image src="../../static/images/m_b_praisa.png" mode=""></image>
								<text v-if="dataInfo.praise_num!=''">{{dataInfo.praise_num}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import imageList from '../../components/mi_circle/moment_images/moment_images.vue'
	import formatRelativeTime from '../../common/js/formatRelativeTime.js'
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	export default {
		components: {
			LazyLoad,
			imageList
		},
		data() {
			return {
				content_id: '',
				dataInfo: {},
				comment_list: []
			};
		},
		filters: {
			formatRelativeTime: formatRelativeTime
		},
		methods: {
			toProDatail(id) {
				uni.navigateTo({
					url: `/subPage/proddetail/proddetail?id=${id}`,
					success() {

					}
				})
			},
			Back() {
				uni.navigateBack(-1)
			},
			getContentDetail() {
				this.$request.get('/getContentDetail', {
					content_id: this.content_id,
				}).then((res) => {
					this.dataInfo = res.data.data
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			getCommentDisplayList() {
				this.$request.get('/getCommentDisplayList', {
					content_id: this.content_id,
				}).then((res) => {
					this.comment_list = res.data.data.comment_list
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad(e) {
			this.content_id = e.id
			this.getContentDetail()
			this.getCommentDisplayList()
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.app-header-wrapper {
		background-color: rgb(255, 255, 255);
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 50%;
		width: 7.2rem;
		transform: translateX(-50%);
		border-bottom: 1px solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: .96rem;
		color: #666;
		padding: 0;
		transition: transform .2s ease-out;

		&>view {
			display: flex;
			align-items: center;
		}

		.app-header-item {
			display: block;
			width: 0.6rem;
			margin: 0 0.2rem;
		}

		.app-header-left {

			.app-header-item {

				.icon-back {
					width: 0.5rem;
					height: 0.5rem;
					line-height: .6rem;

					image {
						width: 0.5rem;
						height: 0.5rem;
					}
				}
			}
		}

		.app-header-middle {
			flex: 1;
			text-align: center;
			min-width: 0;

			.app-header-title {
				color: rgb(102, 102, 102);
				width: 100%;
				font-size: .3rem;
			}
		}

		.app-header-right {
			min-width: 1rem;

			.app-header-item {
				display: block;
				width: 0.8rem;
				margin: 0 0.2rem;

				image {
					display: block;
					width: 0.8rem;
					height: 0.8rem;
					overflow: hidden;
				}
			}
		}
	}

	.rec-card {
		padding-top: 0.3rem;
		text-align: left;
		margin-bottom: 0.4rem;
		margin-left: 0;
		margin-right: 0;
		padding-bottom: 0.1rem;
		border-bottom: 1px solid #f5f5f5;

		&:not(:last-child):after {
			margin-left: -0.24rem;
			margin-right: -0.24rem;
			display: block;
			content: "";
			border-bottom: 0.12rem solid #f6f6f6;
		}


		.user {
			margin-bottom: 0.2rem;
			display: flex;
			align-items: center;

			.user-avatar {
				margin-right: 0.16rem;
				width: 0.52rem;
				height: 0.52rem;
				border-radius: 0.52rem;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.user-info {
				flex: 1;

				.user-info-name {
					font-size: .24rem;
					font-weight: 500;
					color: #161616;
					line-height: 1.4;
				}

				.user-info-other {
					font-size: .2rem;
					font-weight: 500;
					color: #757575;

					.time {
						margin-right: 0.12rem;
					}

					.device {
						padding-left: 0.2rem;
						position: relative;
						margin-right: .1rem;

						&:before {
							content: "";
							width: 0.13rem;
							height: 0.21rem;
							background: url(../../static/images/phone.png) 50% no-repeat;
							background-size: 100% 100%;
							position: absolute;
							left: 0;
							top: 8%;
						}
					}
				}
			}
		}

		.card-content {
			margin-bottom: 0.27rem;
			position: relative;

			.title {
				margin-bottom: 0.12rem;
				max-width: 6.3rem;
				overflow: hidden;
				text-overflow: ellipsis;
				justify-content: flex-start;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				font-weight: 500;
				color: #161616;
				font-size: .3rem;

				.question-i {
					display: inline-block;
					margin-right: 0.08rem;
					width: 0.29rem;
					height: 0.29rem;
					vertical-align: -.038rem;

					image {
						width: 0.29rem;
						height: 0.29rem;
					}

				}
			}

			.moment-tags {
				max-height: 1.2rem;
				overflow: hidden;

				.tags-item {
					float: left;
					display: flex;
					align-items: center;
					padding: 0.09rem;
					margin-right: 0.14rem;
					max-width: 6.6rem;
					margin-bottom: 0.18rem;
					line-height: .24rem;
					border-radius: 0.06rem;
					font-size: .2rem;
					font-weight: 500;
					color: #757575;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					background: none;
					padding-left: 0px;
					padding-right: 0px;

					text {}
				}
			}

			.line {
				margin-bottom: 0.23rem;
				display: block;
				height: 0;
				border-bottom: 1px solid hsla(0, 0%, 92%, .6);
			}


			.normal {

				.content {
					font-size: .3rem;
					font-weight: 500;
					color: #161616;
					line-height: 1.6;
					word-wrap: break-word;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;


				}

			}
		}

	}

	.mi-circle-product {
		padding-top: .96rem;

		.product-header {
			padding: 0.13rem 0.1rem;
			text-align: left;
			border-bottom: 3px solid #f5f5f5;
			overflow: hidden;
			display: flex;
			align-items: center;

			.img-box {
				margin-right: 0.16rem;
				width: 0.6rem;
				height: 0.6rem;

				image {
					width: 0.6rem;
					height: 0.6rem;
					vertical-align: middle;
				}
			}

			.title {
				flex: 1;
				font-size: .26rem;
				line-height: 1;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}

			.device-hot {
				font-size: .24rem;
				line-height: 1;
				color: #999;
			}

			.arrow {
				width: 0.4rem;
				height: 0.4rem;

				image {
					width: 0.4rem;
					height: 0.4rem;
				}
			}
		}

		.main-content {
			margin: 0 0.24rem;
			overflow: hidden;
			padding-bottom: 0.85rem;

			.comments {
				text-align: left;

				.comments-num {
					margin-bottom: 0.28rem;
					color: #333;
					font-size: .24rem;
				}

				.comments-user {
					margin-bottom: 0.4rem;
					display: flex;

					.comments-user-avatar {
						margin-right: 0.24rem;
						width: 0.52rem;
						height: 0.52rem;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.comments-user-input {
						flex: 1;
						padding: 0 0.24rem;
						height: 0.52rem;
						line-height: .52rem;
						background: #f6f6f6;
						border-radius: 0.26rem;
						font-size: .24rem;
						color: #999;
					}
				}

				.no-data {
					margin-bottom: 0.3rem;
					height: 2.4rem;
					line-height: 2rem;
					text-align: center;
					font-size: .22rem;
					color: #999;
					border-bottom: 1px solid #f5f5f5;
				}
			}

			.comments-list {
				.comment {
					display: flex;
					align-items: flex-start;
					text-align: left;
					padding-bottom: 0.2rem;

					&:last-child {
						padding-bottom: 0;
					}

					.comment-avatar {
						margin-right: 0.24rem;
						width: 0.52rem;
						height: 0.52rem;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.comment-content {
						flex: 1;
						padding-bottom: 0.14rem;
						border-bottom: 1px solid #f5f5f5;

						.comment-discuss {
							margin-top: 0.05rem;
							margin-bottom: 0.06rem;
							padding: 0.2rem;
							background: #fafafa;
							border-radius: 0.08rem;
							line-height: 1.4;

							.comment-discuss-item {
								.p {
									.name {
										font-size: .26rem;
										color: #999;
									}

									.text {
										font-size: .26rem;
										color: #333;
									}
								}
							}
						}

						.comment-info {
							display: flex;
							align-items: flex-start;

							.comment-info-l {
								flex: 1;

								.comment-user {


									.name {
										font-size: .24rem;
										color: #999;
									}

									.time {
										font-size: .24rem;
										color: #999;

										&:not(:first-child) {
											margin-left: 0.1rem;
										}
									}
								}

								.comment-text {
									margin-top: 0.06rem;
									font-size: .26rem;
									color: #333;
									line-height: 1.6;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
								}
							}

							.comment-praise {
								display: flex;
								align-items: center;
								color: #999;
								font-size: .2rem;
								font-weight: 500;
								position: relative;

								.num {
									margin-right: 0.04rem;
									position: relative;
									top: -10%;
								}

								image {
									display: inline-block;
									width: 0.29rem;
									height: 0.29rem;
								}
							}
						}
					}
				}
			}

			.bottom-action {
				display: flex;
				align-items: center;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				box-sizing: border-box;
				padding: 0.15rem 0 0.15rem 0.24rem;
				background-color: #fff;
				border-top: 1px solid #f5f5f5;
				z-index: 999;

				.bottom-action-left {
					width: 40%;

					.bottom-action-btn {
						padding: 0;
						background: #ff5528;
						color: #fff;
						text-align: center;

						height: 0.66rem;
						border-radius: 0.66rem;
						font-weight: 500;
						font-size: .26rem;

						image {
							display: inline-block;
							width: 0.2rem;
							height: 0.2rem;
						}
					}
				}

				.bottom-action-right {
					width: 60%;

					.bottom-action-ctrl {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.action-icon {
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: .26rem;
							color: #666;
							font-weight: 500;
							flex: 1;

							image {
								width: 0.4rem;
								height: 0.4rem;
							}
						}
					}
				}
			}

		}
	}
</style>